<template>
	<div class="body">
		<div class="hello">
				<div class="img">
					<div class="img1"><img src="../../../static/img/zhuce1.png" alt=""></div>
					<div class="img2"><img src="../../../static/img/zhuce2.png" alt=""></div>
					<div class="img3"><img src="../../../static/img/zhuce3.png" alt=""></div>
				</div>
				<div class="userImg">
					<img src="../../../static/img/user.png" alt="">
					<div class="userImg_dl">&nbsp;&nbsp;登&nbsp;录</div>
					<div class="to_denglu">
						还没有账号？
						<router-link to="/registerphone">立即注册</router-link>
					</div>
					<hr class="ui_hr">
				</div>
				<div class="text">
					<div>用 &nbsp;&nbsp;户&nbsp;&nbsp;名:<input id="username" class="username" v-model="userName" placeholder="请输入用户名"></div><span id="username_span"></span><br><br>
					<div>密 &nbsp;&nbsp;码：&nbsp;&nbsp;&nbsp;<input id="password" class="password" type="password" v-model="password" placeholder="请输入密码"></div><span id="password_span"></span><br><br>
					<!-- <div>确 &nbsp;认&nbsp;密&nbsp;码：&nbsp;<input id="issure" class="issure" type="password" placeholder="请再次输入密码"></div><span id="issure_span"></span><br><br> -->
					<div class="forgetPassword" @click="forgetPassword">忘记密码?</div>
					<div><button v-on:click="searchUser">登&nbsp;&nbsp;录</button></div>
				</div>
		</div>
	</div>
</template>

<script>
// import axios from 'axios'
  export default {
    name: 'login',
    data() {
      return {
		userName:'',
		password:''
	  }
    },
    methods: {
      searchUser() {
		if(this.userName==''||this.password==''){
			alert('请输入用户名或密码！')
			console.log('input username or password')
		}else{
			var name1 = this.userName.toString();
			var password1 = this.password;
			// console.log('name1',name1,'password1',password1);
			this.$http.post('http://localhost:3000/api/user/searchUser',{
				userName:name1,
				password:password1
			},{}).then(function(res){
				var result = res.data;
				// console.log('result',result[0].id);
				// for(var i = 0; i<result.length; i++){
				// 	console.log(result[i]);
				// }
				// this.userName = res.data.Data.name;
				// this.password = res.data.Data.password;
				// console.log(result[0])
				if(name1 == result[0].name && password1 == result[0].password){
					console.log('right')
					this.$router.push('/')
				}else{
					console.log('err')
				}
			}).catch(function(err){
				console.log(err);
			})
		}
		
	  },
	  forgetPassword(){
		  this.$router.push('/surephone')
	  }
    },
	mounted(){
		
	}
  }
</script>

<style scoped>
	.body{
		position: relative;
		top: 0;
		padding-top: 80px;
		padding-bottom: 50px;
		padding-left: 200px;
		background-image: url(../../../static/img/zhuce_bj.jpg);
		background-size: 100% 100%;
	}
	button{
		width: 245px;
		height: 40px;
		margin: 20px 10px 0 20px;
		background: #00B7FF;
		font-weight: 800;
		color: #FFFFFF;
	}
	button:hover{
		cursor: pointer;
	}
	input{
		margin-left: 30px;
		height: 40px;
		width: 200px;
		border: #CACACA 1px solid;
	}
	span{
		position: absolute;
		right: 0;
		color: red;
	}
	.issure{
		margin-left: 5px;
	}
	.hello{
		width: 1080px;
		height: 500px;
		background: #fff;
		position: relative;
	}
	.img{
		position: absolute;
		width: 690px;
		height: 400px;
		margin: 50px 40px 50px 0;
		/* background-color: #CACACA; */
		float: left;
	}
	.img1{
		width: 406px;
		height: 377px;
		position: absolute;
		top: 5px;
		left: 50px;
		z-index: 1000;
	}
	.img2{
		width: 409px;
		height: 364px;
		position: absolute;
		top: 5px;
		left: 200px;
		z-index: 999;
	}
	.img3{
		width: 437px;
		height: 384px;
		position: absolute;
		top: 5px;
		left: 290px;
	}
	.userImg{
		position: absolute;
		right: 270px;
		top: 25px;
	}
	.userImg_dl{
		position: absolute;
		top: 30px;
		left: 80px;
		width: 80px;
		font-size: 24px;
	}
	.to_denglu{
		position: absolute;
		margin-top: 16px;
		margin-left: 175px;
		width: 200px;
	}
	.ui_hr{
		margin-top: 36px;
		width: 310px;
		position: absolute;
	}
	.text{
		position: absolute;
		right: 30px;
		top: 150px;
		z-index: 1000;
		width: 300px;
		height: 370px;
		float: right;
		overflow: hidden;
		/* padding-top: 100px; */
	}
	.forgetPassword{
		color: skyblue;
		float: right;
		padding-right: 15px;
		cursor: pointer;
	}
	
</style>